<script>
  import {FeedbackStore} from "../stores";
  import Card from "./Card.svelte";
  export let item;

  const handleDelete = (itemId) => {
    FeedbackStore.update((currentFeedback) => {
      return currentFeedback.filter(item => item.id !== itemId);
    });
  };

</script>


<main>
  <Card>
    <div class="num-display absolute -top-2 -left-2 w-10 h-10 bg-pink-600 border border-gray-300 rounded-full flex items-center justify-center text-center text-2xl text-white">
      {item.rating}
    </div>
    <button class="close absolute top-2 right-4 cursor-pointer" on:click={()=>handleDelete(item.id)}>
      X
    </button>
    <p class="text-display">
      {item.text}
    </p>
  </Card>
</main>
